<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会比赛秩序管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">竞赛日程表</a>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="sc-card">
            <div class="card_top">
                <div>
                    <el-form>
                        <el-form-item label="场号：">
                            <el-select v-model="scfield" class="card_sel">
                                <el-option v-for="i in fieldnum" :key="i" :label="i" :value="i">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="top_btn">
                    <el-button type="warning" @click="Addscheduledata">添加</el-button>
                </div>
                <div class="top_btn">
                    <el-button type="primary" @click="exportExcel">导出</el-button>
                </div>
            </div>

            <el-table highlight-current-row :data="currentPageData" border>
                <el-table-column prop="mano" label="项次" width="60">
                </el-table-column>
                <el-table-column prop="sexName" label="性别">
                </el-table-column>
                <el-table-column prop="gridName" label="组别">
                    <template #default="scope">
                        {{ scope.row.gridName }}
                        <span v-if="scope.row.nr !== 0">,</span>
                        {{ scope.row.nrName }}
                        <span v-if="scope.row.wr !== 0">,</span>
                        {{ scope.row.wrName }}
                    </template>
                </el-table-column>
                <el-table-column prop="diatance" label="距离">
                </el-table-column>
                <el-table-column prop="msidName" label="项目">
                </el-table-column>
                <el-table-column prop="stage" label="阶段">
                </el-table-column>
                <el-table-column prop="stidName" label="赛别">
                </el-table-column>
                <el-table-column prop="plcnt" label="人数">
                </el-table-column>
                <el-table-column prop="grcnt" label="分组数">
                </el-table-column>
                <el-table-column prop="starttime" label="时间">
                </el-table-column>
                <el-table-column prop="startdate" label="日期">
                </el-table-column>
                <el-table-column prop="replay" label="重赛">
                </el-table-column>
                <el-table-column prop="admissions" label="录取">
                </el-table-column>
                <el-table-column label="操作" width="180"  fixed="right">
                    <template #default="scope">
                        <el-button type="primary" @click="showeditdialog(scope.row)">修改</el-button>
                        <el-button type="danger" @click="Schdelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="paging" @size-change="handleSizeChange" @current-change="handlePageChange" background
                :page-sizes="[3, 5, 10, 15, 20, 50]" layout="total, prev, pager, next, jumper" :total="total"
                :page-size="queryObj.limit" :current-page="queryObj.page">
            </el-pagination>
        </el-card>

        <!-- 修改页面 -->
        <el-dialog title="竞赛日程修改" v-model="editdialogVisible" @close="handleDialogClose" width="50%" draggable
            :before-close="handleClose">
            <el-form :model="editfrom" label-width="70">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项次：">
                            <el-input v-model="editfrom.mano"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="并组：">
                            <el-checkbox v-model="checked"></el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性别：">
                            <el-select v-model="editfrom.sex">
                                <el-option v-for="item in SexData" :key="item.sex" :label="item.sxname"
                                    :value="item.sex"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="组别：">
                            <el-select v-model="editfrom.grid">
                                <el-option v-for="item in GroupData" :key="item.grid" :label="item.name"
                                    :value="item.grid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 并 -->
                <el-row v-if="checked === true">
                    <el-col :span="12">
                        <el-form-item label="组别1：">
                            <el-select v-model="editfrom.nr">
                                <el-option label=" " :value="0"></el-option>
                                <el-option v-for="item in GroupData" :key="item.grid" :label="item.name"
                                    :value="item.grid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="组别2：">
                            <el-select v-model="editfrom.wr">
                                <el-option label=" " :value="0"></el-option>
                                <el-option v-for="item in GroupData" :key="item.grid" :label="item.name"
                                    :value="item.grid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目：">
                            <el-select v-model="editfrom.msid">
                                <el-option v-for="item in PcbData" :key="item.msid" :label="item.cname"
                                    :value="item.msid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="阶段：">
                            <el-input v-model="editfrom.stage"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="赛别：">
                            <el-select v-model="editfrom.stid">
                                <el-option v-for="item in SaiData" :key="item.stid" :label="item.cname"
                                    :value="item.stid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="人数：">
                            <el-input v-model="editfrom.plcnt"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="组数：">
                            <el-input v-model="editfrom.grcnt"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="日期：">
                            <el-date-picker v-model="editfrom.startdate" value-format="YYYY-MM-DD" type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="时间：">
                            <el-input v-model="editfrom.starttime"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="重赛：">
                            <el-input v-model="editfrom.replay"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="录取：">
                            <el-input v-model="editfrom.admissions"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelEdit">取 消</el-button>
                <el-button type="primary" @click="editScheduleinfo">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 添加页面 -->
        <el-dialog title="竞赛日程添加" v-model="adddialogVisible" width="50%" draggable :before-close="addleClose">
            <el-form :model="addfrom" label-width="70" :rules="rules" ref="addForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="mano" label="项次：">
                            <el-input v-model="addfrom.mano"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="并组：">
                            <el-checkbox v-model="addchecked"></el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性别：">
                            <el-select v-model="addfrom.sex">
                                <el-option v-for="item in SexData" :key="item.sex" :label="item.sxname"
                                    :value="item.sex"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="组别：">
                            <el-select v-model="addfrom.grid">
                                <el-option v-for="item in GroupData" :key="item.grid" :label="item.name"
                                    :value="item.grid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 并 -->
                <el-row v-if="addchecked === true">
                    <el-col :span="12">
                        <el-form-item label="组别1：">
                            <el-select v-model="addfrom.nr">
                                <el-option label="" :value="0"></el-option>
                                <el-option v-for="item in GroupData" :key="item.grid" :label="item.name"
                                    :value="item.grid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="组别2：">
                            <el-select v-model="addfrom.wr">
                                <el-option label="" :value="0"></el-option>
                                <el-option v-for="item in GroupData" :key="item.grid" :label="item.name"
                                    :value="item.grid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目：">
                            <el-select v-model="addfrom.msid">
                                <el-option v-for="item in PcbData" :key="item.msid" :label="item.cname"
                                    :value="item.msid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="阶段：">
                            <el-input v-model="addfrom.stage"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="赛别：">
                            <el-select v-model="addfrom.stid">
                                <el-option v-for="item in SaiData" :key="item.stid" :label="item.cname"
                                    :value="item.stid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="plcnt" label="人数：">
                            <el-input v-model="addfrom.plcnt"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="grcnt" label="组数：">
                            <el-input v-model="addfrom.grcnt"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="startdate" label="日期：">
                            <el-date-picker v-model="addfrom.startdate" value-format="YYYY-MM-DD" type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="时间：">
                            <el-input v-model="addfrom.starttime"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="重赛：">
                            <el-input v-model="addfrom.replay"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="录取：">
                            <el-input v-model="addfrom.admissions"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addleClose">取 消</el-button>
                <el-button type="primary" @click="addSch">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fieldnum: null,
            scfield: 1,
            schData: [],
            queryObj: {
                limit: 10,
                page: 1,
                query: " "
            },
            total: 0,
            currentPageData: [],
            editdialogVisible: false,
            editfrom: {},
            checked: false,
            adddialogVisible: false,
            addfrom: {
                mano: null,
                sex: null,
                grid: null,
                nr: null,
                wr: null,
                msid: null,
                stage: 1,
                stid: null,
                plcnt: null,
                grcnt: null,
                startdate: '',
                starttime: '00:00:00',
                replay: null,
                admissions: null,
                chno: null,
                rcnt: null,
                addtime: null,
                day: null,
            },
            initialForm: {},
            addchecked: false,
            // 各数据
            SexData: [],
            GroupData: [],
            PcbData: [],
            SaiData: [],
            rules: {
                mano: [
                    { required: true, message: '项次不能为空', trigger: 'blur' },
                ],
                plcnt: [
                    { required: true, message: '人数不能为空', trigger: 'blur' },
                ],
                grcnt: [
                    { required: true, message: '组数不能为空', trigger: 'blur' },
                ],
                startdate: [
                    { required: true, message: '请选择日期', trigger: 'change' },
                ],
            }
        }

    },
    created() {
        this.getGamenameList();
        this.getScheduleinfoList(this.scfield);
        this.getSexinfoList();
        this.getGroupinfoList();
        this.postPcbasicininfoList();
        this.getSaibiinfoList();
    },
    methods: {
        // 查询
        async getGamenameList() { // 场号
            const result = await this.$http.post(this.BACKEND_URL + '/meeting/getmsg');
            if (result.data.code == 0) {
                this.fieldnum = result.data.data.chcnt
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async getScheduleinfoList(chno) { // 日程数据
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/show/getmsg', { chno: chno });
                if (result.data.code == 0) {
                    this.schData = result.data.data
                    this.total = this.schData.length
                    this.fetchData()
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        async getSexinfoList() { // 性别
            const result = await this.$http.post(this.BACKEND_URL + '/match/getmsg');
            if (result.data.code == 0) {
                this.SexData = result.data.data
                this.addfrom.sex = this.SexData[0].sex
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async getGroupinfoList() { // 组别
            const result = await this.$http.post(this.BACKEND_URL + '/match/getGroupmsg');
            if (result.data.code == 0) {
                this.GroupData = result.data.data
                this.addfrom.grid = this.GroupData[0].grid
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async postPcbasicininfoList() { // 项目
            const result = await this.$http.post(this.BACKEND_URL + '/contest/getmsg');
            if (result.data.code == 0) {
                this.PcbData = result.data.data
                this.addfrom.msid = this.PcbData[0].msid
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async getSaibiinfoList() {  // 赛别
            const result = await this.$http.post(this.BACKEND_URL + '/matchStep/getmsg');
            if (result.data.code == 0) {
                this.SaiData = result.data.data
                this.addfrom.stid = this.SaiData[0].stid
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        // 获取单个数据信息
        async showeditdialog(info) {
            this.editdialogVisible = true
            this.editfrom = info
            if (info.nr !== null || info.wr !== null) {
                this.checked = true
            }
        },
        handleDialogClose() {
            this.checked = false
        },
        async editScheduleinfo() {
            if (this.checked === false) {
                this.editfrom.nr = 0
                this.editfrom.wr = 0
                const result = await this.$http.post(this.BACKEND_URL + '/show/updatetmsg', this.editfrom)
                if (result.data.code == 0) {
                    this.editdialogVisible = false
                    this.getScheduleinfoList(this.scfield);
                    this.$message.success('修改成功')
                } else if (result.data.code == 500) {
                    this.getScheduleinfoList(this.scfield);
                    this.$message.error(result.data.msg)
                }
            } else {
                const result = await this.$http.post(this.BACKEND_URL + '/show/updatetmsg', this.editfrom)
                if (result.data.code == 0) {
                    this.editdialogVisible = false
                    this.getScheduleinfoList(this.scfield);
                    this.$message.success('修改成功')
                } else if (result.data.code == 500) {
                    this.getScheduleinfoList(this.scfield);
                    this.$message.error(result.data.msg)
                }
            }
        },
        cancelEdit() {
            this.editdialogVisible = false
            this.getScheduleinfoList(this.scfield)
        },
        handleClose(done) {
            this.getScheduleinfoList(this.scfield)
            done()
        },
        // 添加
        Addscheduledata() {
            this.adddialogVisible = true
            this.initialForm = { ...this.addfrom }
        },
        async addSch() {
            this.$refs.addForm.validate(async (valid) => {
                if (valid) {
                    this.addfrom.chno = this.scfield
                    this.addfrom.rcnt = 1
                    this.addfrom.addtime = '00:00:00'
                    this.addfrom.day = 2
                    const result = await this.$http.post(this.BACKEND_URL + '/show/insertmsg', this.addfrom)
                    if (result.data.code == 0) {
                        this.adddialogVisible = false
                        this.getScheduleinfoList(this.scfield);
                        this.$message.success('添加成功')
                        this.addfrom = { ...this.initialForm }
                    } else if (result.data.code == 500) {
                        this.addfrom = { ...this.initialForm }
                        this.$message.error(result.data.msg)
                    }
                } else {
                    this.$message.error('请填写项次');
                }
            });
        },
        addleClose() {
            this.adddialogVisible = false
            this.addfrom = { ...this.initialForm }
        },
        // 删除
        Schdelete(e) {
            this.$confirm('此操作将删除改条数据，是否继续', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(async () => {
                const result = await this.$http.post(this.BACKEND_URL + '/show/deletemsg', e)
                if (result.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getScheduleinfoList(this.scfield);
                } else if (result.data.code == 500) {
                    this.$message.error(result.data.msg)
                }
            }).catch(() => {
            });
        },
        async exportExcel() {
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/show/export', null, {
                    responseType: 'blob',
                });

                let downloadUrl = window.URL.createObjectURL(new Blob([result.data]));

                const link = document.createElement('a');
                link.href = downloadUrl;
                link.setAttribute('download', '日程表S.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } catch (error) {
                console.error('File export failed:', error);
            }
        },
        // 分页
        fetchData() {
            let startIndex = (this.queryObj.page - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.schData.slice(startIndex, endIndex);
        },
        handleSizeChange(newSize) {
            this.queryObj.limit = newSize
        },
        handlePageChange(newPage) {
            this.queryObj.page = newPage;
            let startIndex = (newPage - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.schData.slice(startIndex, endIndex);
        }
    },
    watch: {
        scfield(newGroupName, oldGroupName) {
            if (newGroupName !== oldGroupName) {
                this.getScheduleinfoList(newGroupName);
            }
        }
    },
}
</script>

<style lang="less" scoped>
:deep(.cell) {
    text-align: center;
}

.sc-card {
    margin-top: 15px;
}

.card_sel {
    width: 100px;
}

.card_top {
    display: flex;
}

.top_btn {
    margin-left: 15px;
}

.paging {
    padding: 15px;
}
</style>
